<template>
    <div>
        <a-row type="flex">
            <a-col :span="20">
                <div>任务状态统计</div>
                <div ref="chart" :style="{width:'100%',height:'300px'}"></div>
            </a-col>
            <a-col :span="4">
                <a-select v-model="form.day" style="width: 100%" @change="getData">
                    <a-select-option value="7">最近7天</a-select-option>
                    <a-select-option value="30">最近30天</a-select-option>
                    <a-select-option value="60">最近60天</a-select-option>
                </a-select>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import echarts from "echarts";
    export default {
        name: 'task',
        data() {
            return {
                data: [],
                xAxis:[],
                legend:[],
                form:{
                    day:'7',
                },
                colors:{'订单待审核':'#EC9300','订单进行中':'#4C75A2','订单审核不通过':'#fff','订单已完成':'#f5222d','订单已取消':'#ddd'},
                chart:''
            }
        },
        methods: {
            getData () {
                this.xAxis = []
                this.legend = []
                this.data = []
                this.http('get','index/task-status',this.form).then(res=>{
                    this.xAxis = res.day;
                    for( let item in res.data){
                        this.legend.push(item)
                        this.data.push({
                            name: item,
                            itemStyle: {
                              normal: {
                                color: this.colors[item],
                                lineStyle: {
                                  color: this.colors[item],
                                  width: "1px"
                                }
                              },

                            },
                            smooth: true,
                            type: "bar",
                            stack: 'status',
                            data: res.data[item],
                            animationDuration: 2800,
                            animationEasing: "cubicInOut",
                            barMaxWidth: 30 //最大宽度
                          })
                    }
                    
                    this.getChart()
                })
            },
            getChart() {
              let that = this;
              if (this.chart) {
                this.chart.clear()
                this.chart.dispose();
              }
              this.chart = echarts.init(this.$refs.chart);
              this.chart.setOption({
                xAxis: {
                  data: that.xAxis,
                  axisLabel: {
                    textStyle: {
                      color: '#fff'   //x轴字体颜色
                    }
                  },
                  //boundaryGap: false,

                },
                grid: {
                  left: 0,
                  right: 10,
                  bottom: 20,
                  top: 30,
                  containLabel: true,
                },
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "cross"
                  },
                  padding: [5, 10]
                },
                yAxis: {
                  axisLabel: {
                    textStyle: {
                      color: '#fff'   //y轴字体颜色
                    }
                  },

                },
                 legend: {
                   data: that.legend,
                   textStyle:{color:'#fff'}
                 },
                series: that.data
              });
            },
        },
        mounted() {
            this.getData();
        },
    }
</script>
